<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="checklogin.jsp"%>
<html>
<head>
	<base href="<%=basePath%>">
	<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<link rel="stylesheet" type="text/css" href="layui/dist/css/layui.css">
	<script type="application/javascript" src="js/jq.js"></script>
	<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/simpleCart.min.js"> </script>
	<script type="application/javascript" src="layui/dist/layui.all.js"></script>
	<script src="js/orderr.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!-- header -->
<!-- header -->
<div class="head-top"></div>

<!-- 导航栏-->

<%@include file="header.jsp"%>
<!-- about -->
<div class="orders">
	<div class="container">

		<div class="order-top">
			<h1 id="shopname"></h1>
			<table class="table table-hover">
				<thead>
				<tr>
					<th><h4>样图</h4></th>
					<th><h4>菜名</h4></th>
					<th><h4>价格</h4></th>
					<th></th>
				</tr>
				</thead>
				<tbody id="showdishs">

				</tbody>
			</table>


			<div class="clearfix"></div>
		</div>

	</div>
</div>
<!-- about -->
<!-- footer-->
<%@include file="footer.jsp"%>

<%@include file="modal.jsp"%>
<!-- 模态框-->
</body>

<script>

	var layer,form ;

	layer=layui.layer;
	form=layui.form;


	$(function () {
		//页面加载完成后运行下列函数
		//订单函数初始化
		begin('<%=path%>');
		$.ajax({
			type: "GET",
			url: '<%=path%>/menubyshopid?shop_id=<%=request.getAttribute("shop_id")%>',
			//通过request转发携带的参数来发送请求查询对应的店铺菜名
			dataType:'json',
			success: function (result) {
				//先填充这个店铺的名字
				$("#shopname").text(result.shopname)
				for(var i=0;i<result.data.length;i++){
					var  tr=$("<tr></tr>")
					//创建新的tr元素
					var imgtd=$(`<td><img src='${result.data[i].dish_img_url}' style="width: 100px;height: 50px"></td>`)
					//直接通过jq创建td元素并且用模板字符串填写好相应的数据
					var dish_namenametd=$(`<td>${result.data[i].dish_name}</td>`)
					//再通过如上方式填充对应的菜品名称
					var priceimgtd=$(`<td>${result.data[i].price}</td>`)
					//再通过如如上方式填充对应的价格
					var btntd=$(`<td><button dishid='${result.data[i].dish_id}' class="morebtn hvr-rectangle-in btn btn-success">加入</button></td>`)
					//再通过如如如上方式填充对应的按钮标签
					tr.append(imgtd,dish_namenametd,priceimgtd,btntd);
					//再统一填充到上面创建的tr对象上
					$("#showdishs").append(tr)
					//再填充到tbody中
				}
			},
			error: function(data) {
			}
		});
		$("#showdishs").on("click","tr>td>button",function () {
			//以父元素tbody作为事件托管对象将其点击事件委托到每个tr中的button中
			$.ajax({
				type: "GET",
				url: `<%=path%>/adddish?dish_id=${$(this).attr("dishid")}`,
				//请求参数附带菜品id让后台能正确地识别要添加的菜品
				dataType:'json',
				success: function (result) {
					//一旦接收到正确的参数就弹出添加成功的提示框
					layer.msg("添加成功",{
						icon:1,
						time: 2000 //2秒关闭（如果不配置，默认是3秒）
					})
				},
				error: function(data) {
				//因为没有相对应的特殊判断及其处理,所以这里就没写错误处理
				}
			});
		})



		//点击购物车图片触发点击事件
		$("#buy").on("click",function () {
			//运行ordermenu初始化购物车函数
			ordermenu('<%=path%>')
			//给id=buybtn 的按钮触发点击事件开启模态框
			$("#buybtn").click();

		})


	})



</script>

</html>